<template>
  <!-- 外围最大的盒子 -->
  <div class="List">
    <!-- 图片区域 -->
    <div class="myimg" v-if="myimage != ''">
      <!-- :style="{ width: width + 'px', height: height + 'px' }" -->
      <img
        id="myone"
        @click="son"
        :src="'data:image/png;base64,' + myimage"
        :style="{
          width: width * 0.6 * num + 'px',
          height: height * 0.6 * num + 'px',
          marginLeft: loctionleft + 'px',
          marginTop: loctiontop + 'px',
        }"
      />
      <!-- <van-image
        id="myone"
        @click="son"
        :src="'data:image/png;base64,' + myimage"
        :style="{
          width: width * 0.6 * num + 'px',
          height: height * 0.6 * num + 'px',
          marginLeft: loctionleft + 'px',
          marginTop: loctiontop + 'px',
        }"
      >
    </van-image> -->

        <!-- ------------------------------------------------车辆的实时位置 -->
        <div class="mybycar">
          <!-- <span
            class="Gray"
            :style="{
              width: 15 * num * 0.6+'px',
              height: 15 * num*0.6 + 'px',
              top: (height - (inif.y / 10.0) / 5  - 16) * 0.6 * num + loctiontop + 'px',
              left: ((inif.x / 10.0) / 5 - 4) * 0.6 * num + loctionleft + 'px',
              transform: 'rotate(' + inif.fused_angle - 20 + 'deg)',
            }"
          >
          </span> -->
          <img
            id="bycar"
            src="../../../assets/车辆.png"
            alt=""
            :style="{
              width: 15 * num + 'px',
              height: 30 * num + 'px',
              top: (height - (inif.y / 10.0) / 5 ) * 0.6 * num  -(30* 0.6 * num/2)+ loctiontop + 'px',
              left: ((inif.x / 10.0) / 5) * 0.6 * num + loctionleft -(15* 0.6 * num/2) + 'px',
              transform: 'rotate(' + -(inif.fused_angle * 180 / Math.PI +90) + 'deg)',
            }"
          />
        </div>



        <!-- ----------------------------------------------------------------当没有点击任何一项的时候展现出全部库位点 -->
        <template v-for="(item, index) in mock">
          <span
            v-if="item.type != 3"
            :key="index"
            id="sonspan"
            style="pointer-events: none;"
            :style="{
              backgroundColor: item.type == 0 ? '#9e9e9e':item.type == 1 ? '#feed9d':item.type == 2 ? '#ff9800':'',
              lineHeight: 20 * 0.6 * num+ 'px',
              fontSize: 16 * 0.6 * num + 'px',
              width: 20*0.6 * num + 'px',
              height: 20*0.6 * num + 'px',
              top: (height-(item.y / 10.0) / 5) * 0.6 * num  -(20* 0.6 * num/2)+ loctiontop +
                'px',
              left: (((item.x / 10.0) / 5)) * 0.6 * num  -(20* 0.6 * num/2)+ loctionleft + 'px',
              transform: 'rotate(' + item.angle* 180 / Math.PI + 'deg)',
            }"
            >{{ item.id }}</span
          >
          <!--充电点图片 -->
          <img
            v-if="item.type == 3"
            :key="index * 0.15"
            id="bycar"
            src="../../../assets/maiwei.zip.png"
            alt=""
            :style="{
              width: 20 * num* 0.6 + 'px',
              height: 20 * num* 0.6 + 'px',
              top:
                (height-(item.y / 10.0) / 5) * 0.6 * num  -(20* 0.6 * num/2)+ loctiontop +
                'px',
              left: ((item.x / 10.0) / 5) * 0.6 * num  -(20* 0.6 * num/2)+ loctionleft + 'px',
              transform: 'rotate(' + item.angle* 180 / Math.PI + 'deg)',
            }"
          />
          <!-- 这里的0.5是让点位缩放0.5倍 -->
        </template>
        <!-------------------------------------------------- 显示所有的路线图 -------------------------------------------->
        <template v-if="complete != undefined">
          <span
              v-for="item in complete"
              id="myspan"     
              @click="select(item)"        
              style="text-align: center;"
              :style="{
                pointerEvents: (newshow ? 'none' : 'unset'),
                width: (item.weizhi.width + item.weizhi.height-2) * num* 0.6 + 'px',
                height: (item.weizhi.height) * num* 0.6 + 'px',
                top: item.weizhi.y * num* 0.6 -((item.weizhi.height+3)* 0.6 * num/2) + loctiontop + 'px',
                left: (item.weizhi.x) * num* 0.6 -((item.weizhi.height+3)* 0.6 * num/2) + loctionleft + 'px',
                transform: 'rotate(' + item.weizhi.age + 'deg)',
                transformOrigin:  (item.weizhi.height+3)/2 * num* 0.6 + 'px '+ (item.weizhi.height+3)/2 * num* 0.6  + 'px',
                lineHeight: (item.weizhi.height) * 0.6 * num + 'px',
                fontSize: 20 * 0.6 * num + 'px',
                
              }"
            ><span class="myspanID"
            :style="{
                transform: 'rotate(' + -item.weizhi.age + 'deg)',
                lineHeight: (item.weizhi.height) * 0.6 * num + 'px',
                fontSize: 20 * 0.6 * num + 'px',
              }"
            >{{item.id}}</span></span>
          <!-- <template >
            <span
              v-for="item in complete"
              :key="item.target_point.y"
              id="mianspan"            style="pointer-events: none;"
              :style="{
                width: 35 * 0.6 * num + 'px',
                height: 35 * 0.6 * num + 'px',
                lineHeight: 40 * 0.6 * num + 'px',
                fontSize: 40 * 0.6 * num + 'px',
                top:
                  (height-(item.start_point.y / 10.0) / 5) * 0.6 * num + loctiontop +
                  'px',
                left:
                  ((item.start_point.x / 10.0) / 5) * 0.6 * num + loctionleft +
                  'px',
                  transform: 'rotate(' + item.weizhi.age + 'deg)',
                  transformOrigin: 10 * num + 'px',
              }"
              >{{item.id}}
            </span>
          </template> -->
          <!-- 终点圆点 -->
          <!-- <template v-if="editors == ''">
            <span
              v-for="item in complete"
              :key="item.target_point.x"
              id="mianspan"            style="pointer-events: none;"
              :style="{
                width: 35 * 0.6 * num + 'px',
                height: 35 * 0.6 * num + 'px',
                lineHeight: 40 * 0.6 * num + 'px',
                fontSize: 40 * 0.6 * num + 'px',
                top:
                  (height-(item.target_point.y / 10.0) / 5) * 0.6 * num + loctiontop +
                  'px',
                left:
                  ((item.target_point.x / 10.0) / 5) * 0.6 * num + loctionleft+
                  'px',
              }"
              >2</span
            >
          </template> -->
          <!-- 小圆点之间的边框 -->
          
        </template>
        <template>
                    <!-- -----------------------------------------------------------------------------------------绘图后点击的小圆点 -->
        <span
          v-for="(item, index) in zuobiao"
          id="span"
          :style="{
            fontSize: 20* 0.6 * num + 'px',
            lineHeight: 30 * 0.6 * num + 'px',
            width: 30 * 0.6 * num + 'px',
            height: 30 * 0.6 * num + 'px',
            top: (item.y) * 0.6* num -(30* 0.6 * num/2) + loctiontop + 'px',
            left: (item.x) * 0.6* num-(30* 0.6 * num/2) + loctionleft + 'px',
          }"
          >{{ index + 1 }}</span
        >
        <!--------------------------------------------------------------------- 两个小圆点之间矩形框框 -->
        <span
          id="myspan"
          v-for="(item, index) in border"
          :key="index + '-only'"
          :style="{
            width: (item.width + 28) * num* 0.6  + 'px',
            height: (item.height) * num* 0.6  + 'px',
            top: item.y * num* 0.6 -(33* 0.6 * num/2) + loctiontop + 'px',
            left: item.x * num* 0.6 -(33* 0.6 * num/2) + loctionleft + 'px',
            transform: 'rotate(' + item.age + 'deg)',
            transformOrigin: 17 * num* 0.6 + 'px '+17 * num* 0.6 + 'px',
          }"
        ></span>
          </template>
        <!-- /--------------------------------------------------------------------------------------------------------绘图区域 -->
        <!-- --------------------------------------------------------------点击列表后的第一个小圆点      style="transform-origin: 10px 10px"   :style="{ width: width * 0.5 + 'px', height: height * 0.5 + 'px' }"  -->
        <template v-if="complete != undefined">
          
          <span
            v-if="editors != ''"
            id="span"            style="pointer-events: none;"
            :style="{
              width: editors.weizhi.height * 0.6 * num + 'px',
              height: editors.weizhi.height * 0.6 * num + 'px',
              lineHeight: editors.weizhi.height * 0.6 * num + 'px',
              fontSize: 20 * 0.6 * num + 'px',
              top:
                (
                  height-(editors.start_point.y / 10.0) / 5 ) * 0.6 * num-(editors.weizhi.height* 0.6 * num/2) + loctiontop + 'px',
              left:
                ((editors.start_point.x / 10.0) / 5) * 0.6 * num -(editors.weizhi.height* 0.6 * num/2)+ loctionleft + 'px',
            }"
            >1</span
          >
          <!-- 点击列表后的第二个的小圆点         -->
          <span
            v-if="editors != ''"
            id="span"
            style="pointer-events: none;"
            :style="{
              width: editors.weizhi.height * 0.6 * num + 'px',
              height: editors.weizhi.height * 0.6 * num + 'px',
              lineHeight: editors.weizhi.height * 0.6 * num + 'px',
              fontSize:20 * 0.6 * num + 'px',
              top:
                (
                  height-(editors.target_point.y / 10.0) / 5) * 0.6 * num -(editors.weizhi.height* 0.6 * num/2) + loctiontop +
                'px',
              left:
                ((editors.target_point.x / 10.0) / 5) * 0.6 * num -(editors.weizhi.height* 0.6 * num/2) + loctionleft +
                'px',
            }"
            >2</span
          >
          <span
            v-if="editors != ''"
            id="myspan2"
            style="pointer-events: none;"
            :style="{
              width: (editors.weizhi.width + editors.weizhi.height-2) * num* 0.6 + 'px',
              height: (editors.weizhi.height) * num* 0.6 + 'px',
              top: editors.weizhi.y * num* 0.6 -((editors.weizhi.height+3)* 0.6 * num/2) + loctiontop + 'px',
              left: (editors.weizhi.x) * num* 0.6 -((editors.weizhi.height+3)* 0.6 * num/2) + loctionleft + 'px',
              transform: 'rotate(' + editors.weizhi.age + 'deg)',
              transformOrigin: (editors.weizhi.height+3)/2 * num* 0.6 + 'px '+(editors.weizhi.height+3)/2 * num* 0.6 + 'px',
            }"
          ></span>



        </template>
        <!-------------------------------------------------- 显示所有的路线图 -------------------------------------------->
      <!--平移按钮 -->
      <van-button @click="right" class="right"
        ><van-icon name="arrow" size="44"
      /></van-button>
      <van-button @click="left" class="left"
        ><van-icon name="arrow-left" size="44"
      /></van-button>
      <van-button @click="top" class="top"
        ><van-icon name="arrow-up" size="44"
      /></van-button>
      <van-button @click="bottom" class="bottom"
        ><van-icon name="arrow-down" size="44"
      /></van-button>
      <!-- --------------------------------------------------------------按钮放大缩小区域 -->
      <div class="mybig">
        <van-button type="info" @click="big"
          ><i class="iconfont icon-sousuofangda" style="fontsize: 28px"></i
        ></van-button>
        <van-button type="info" @click="min"
          ><i class="iconfont icon-suoxiao" style="fontsize: 28px"></i
        ></van-button>
      </div>
      <!-- --------------------------------------------------------------按钮放大缩小区域 -->
    </div>

    <!-- 库位属性内容 -->
    <div class="property">
      <!-- 删除库位按钮 -->
      <div class="mybutton">
        <!-- <van-button @click="one">移动</van-button>
        <van-button @click="two">绘图</van-button>
        <van-button @click="remove(editors.id)">删除</van-button> -->
        <!-- <van-button @click="change(editors)" v-if="!newshow">编辑</van-button> -->
        <div v-if="newshow">
          <van-button @click="keep" type="primary">保存路线</van-button>
          <van-button @click="reload" type="primary">重新绘制</van-button>
          <van-button @click="quit" type="warning">取消</van-button>
        </div>
      </div>
      <template v-if="complete != undefined">
        <div class="zore" v-if="!newshow">区域信息</div>
        <div class="beiji" v-if="!newshow">
          <div class="middle">
            <div class="one">
              <span>库位ID:</span
              ><span
                v-if="editors != 0"
                style="color: #fff;margin-left: 11px;"
                >{{ editors.id }}</span
              >
              <!-- <keyboardss :inputValue="editors.id"></keyboardss> -->
            </div>
            <div class="two">
              <div class="newtwo">
                <span> 起点x轴:</span>
                <keyboardss
                  style="color: #fff"
                  v-if="editors != 0"
                  :inputValue="editors.start_point.x"
                  @keyList="startX"
                ></keyboardss>
              </div>
              <div class="newtwo">
                <span>起点y轴:</span
                ><keyboardss
                  style="color: #fff"
                  v-if="editors != 0"
                  :inputValue="editors.start_point.y"
                  @keyList="startY"
                ></keyboardss>
              </div>
            </div>
            <div class="three">
              <div class="newtwo">
                <span>终点x轴:</span
                ><keyboardss
                  style="color: #fff"
                  v-if="editors != 0"
                  :inputValue="editors.target_point.x"
                  @keyList="targetX"
                ></keyboardss>
              </div>
              <div class="newtwo">
                <span>终点y轴:</span
                ><keyboardss
                  style="color: #fff"
                  v-if="editors != 0"
                  :inputValue="editors.target_point.y"
                  @keyList="targetY"
                ></keyboardss>
              </div>
            </div>
            <div class="max">
              <div class="max">
                <span>最大速度:</span
                ><keyboardss
                  class="keyss2"
                  style="color: #fff"
                  v-if="editors != 0"
                  :inputValue="editors.vel_max"
                ></keyboardss>
              </div>
            </div>
            <div class="mywidth">
              <div class="mywidth">
                <span>宽度:</span
                ><keyboardss
                  class="keyss"
                  style="color: #fff"
                  v-if="editors != 0"
                  :inputValue="editors.width"
                  @keyList="onwidth"
                ></keyboardss>
              </div>
            </div>
            <div class="area">
              <div style="display: -webkit-box;" v-if="editors != 0">
                任务区域:
                <!-- <span v-if="editors != 0">
                  <button class="yes" @click="twoYes">是</button>
                  <button class="none" @click="twoNone">否</button>
                </span> -->
                <van-checkbox v-model="editors.valuable_bits_0" @click="oneYes"></van-checkbox>
                <!-- <van-radio-group v-model="editors.valuable_bits_0"  direction="horizontal">
                  <van-radio :name="1" @click="oneYes" v-if="editors.valuable_bits_0 == 1">是</van-radio>
                  <van-radio :name="0" @click="oneNone" v-if="editors.valuable_bits_0 == 0">否</van-radio>
                </van-radio-group> -->
              </div>
              <!-- <div>
                任务执行区域:<span v-if="editors != 0"
                  ><button class="yes" @click="oneYes">是</button
                  ><button class="none" @click="oneNone">否</button></span
                >
              </div> -->
            </div>
            <!-- <div class="area">
              <div>
                任务执行区域:<span v-if="editors != 0">{{
                  editors.valuable_bits_0
                }}</span>
              </div>
            </div> -->
            <!-- <div class="round">
              <div>
                是否可以掉头:<span v-if="editors != 0">{{
                  editors.valuable_bits_1
                }}</span>
              </div>
            </div> -->
            <div class="round">
              <div style="display: -webkit-box;" v-if="editors != 0">
                是否掉头:
                <!-- <span v-if="editors != 0">
                  <button class="yes" @click="twoYes">是</button>
                  <button class="none" @click="twoNone">否</button>
                </span> -->
                <van-checkbox v-model="editors.valuable_bits_1" @click="twoYes"></van-checkbox>
                <!-- <van-radio-group v-model="editors.valuable_bits_1"  direction="horizontal">
                  <van-radio :name="1" @click="twoYes" v-if="editors.valuable_bits_1 == 1">是</van-radio>
                  <van-radio :name="0" @click="twoNone" v-if="editors.valuable_bits_1 == 0">否</van-radio>
                </van-radio-group> -->
              </div>
            </div>
            <div class="round">
              <!-- <div>
                入库方向:<span v-if="editors != 0"
                  ><button class="advance" @click="forward">前进</button
                  ><button @click="retreat" class="oneretreat">
                    后退
                  </button></span
                >
              </div> -->

              <div style="display: -webkit-box;" v-if="editors != 0">
                入库方向:
                <!-- <span v-if="editors != 0">
                  <button class="yes" @click="twoYes">是</button>
                  <button class="none" @click="twoNone">否</button>
                </span> -->
                <van-radio-group v-model="editors.valuable_bits_2"  direction="horizontal">
                  <van-radio :name="1" @click="forward">进</van-radio>
                  <van-radio :name="0" @click="retreat">退</van-radio>
                </van-radio-group>
                </div>
            </div>
          </div>
          <div class="newsever">
            <van-button @click="preserve">保存</van-button>
          </div>
        </div>
      </template>
    </div>

    <!-- 点击新建的表单 -->
    <!-- 构图页面 -->
  </div>
</template>

<script>
    import Cookies from 'js-cookie'
//导入yaml格式进行获取到数据的转换
import yaml from "js-yaml";
//导入确认框
import { Dialog } from "vant";
//导入封装好的接口请求
import { popeditorsApi, addeditorsApi, updateeditorsApi } from "@/api/editors";
//导入获取库位点的接口
import { gainApi } from "@/api/record.js";
export default {
  // 子组件接收数据
  props: ["editors", "complete", "newshow"],
  //定义数据
  data() {
    return {
      originX:0, //原点坐标X
      originY:0, //原点坐标Y
      storage: 0, //入库方向
      direction: 0, //是否为可掉头
      feasible: 0, //任务可行区域变量
      loctiontop: 0, //图片上移变量
      loctionleft: 0, //图片左移变量
      checked: false,
      widthShow: false, //宽度的键盘
      excursionX: "", //便宜x轴距离
      excursionY: "", //便宜y轴距离
      mock: [], //保存库位点的数据
      newx: "", //保存圆点坐标
      newy: "", //保存圆点坐标
      newborder: {}, //测试保存边框
      picShow: false, //控制绘图区域的显示和隐藏
      zuobiao: [], //点击后的每一项数据坐标
      border: [], //两点之间的路线矩形区域数据
      // newshow: false, //绘图开关阀
      move: false, //移动开关阀
      num: 0.5, //缩放比例
      speedShow: false,
      keysshow: false,
      keyshow: false,
      myimage: "", //定义一个保存base64格式的图片变量
      newItem: "", //保存你点击的那一项数据
      id: "", //用来保存点击的是新增还是修改的id做三元判断excursion
      show: false, //控制表单的显示和隐藏
      area: 0, //是否任务可行区域
      round: 0, //是否可以掉头
      formShow: false, //默认表单状态为false关闭隐藏
      formKey: 0, //清除表单的验证
      width: "",
      height: "",
      Areas:50,
      //表单数据
      inif: {
        pathID: "", //路线id
        width: "", //通行区域宽度
        speed: "", //速度
        x: "", //车辆的坐标
        y: "", //车辆坐标
        fused_angle: "", //车辆角度
      },
      //表单验证规则
      rules: {
        //路线id验证规则
        pathID: [
          { required: true },
          { pattern: /^[1-9]\d*/, message: "请输入正确的id" },
        ],
        //速度验证规则
        speed: [
          { required: true },
          { pattern: /^[0-9]+$/, message: "请输入纯数字" },
        ],
        //通行区域的宽度
        width: [
          { required: true },
          { pattern: /^[0-9]+$/, message: "请输入纯数字" },
        ],
      },
    };
  },

  //页面初始化的钩子函数
  created() {
    this.getMap(); //页面一打开就调用这个方法获取地图
    this.getrecord(); //获取所有库位点方法
  },

  //注册局部组件指令
  // directives: {
  //   drag: function (el, binding, vnode) {
  //     let dragBox = el;
  //     let that = vnode.context;
  //     // console.log(that.newshow);
  //     dragBox.onmousedown = (e) => {
  //       //算出鼠标相对元素的位置
  //       let disX = e.clientX - dragBox.offsetLeft;
  //       let disY = e.clientY - dragBox.offsetTop;
  //       // console.log(disX, disY);
  //       document.onmousemove = (e) => {
  //         if (that.newshow) return;
  //         //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
  //         //这个 170 是我元素宽的一半
  //         let left = e.clientX - disX;
  //         let top = e.clientY - disY;
  //         //移动当前元素
  //         dragBox.style.left = left + "px";
  //         dragBox.style.top = top + "px";
  //         console.log(left, top);
  //         that.excursionX = left;
  //         that.excursionY = top;
  //       };
  //       document.onmouseup = (e) => {
  //         //鼠标弹起来的时候不再移动
  //         document.onmousemove = null;
  //         //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
  //         document.onmouseup = null;
  //       };
  //     };
  //   },
  // },
  mounted() {
    let numss = Cookies.get('nums');
    let loctiontopss = Cookies.get('loctiontops');
    let loctionleftss = Cookies.get('loctionlefts');
    if(numss == undefined){
    }else{
      this.num = Number(numss);
    }
    if(loctiontopss == undefined){
    }else{
      this.loctiontop = Number(loctiontopss);
    }
    if(loctionleftss == undefined){
    }else{
      this.loctionleft = Number(loctionleftss);
    }
  },

  //声明方法
  methods: {
    //任务可执行区域是按钮操作事件
    oneYes(val) {
      console.log(this.editors.valuable_bits_0)
        //this.editors.valuable_bits_0 = 0;
      if(this.editors.valuable_bits_0 == false){
        this.$toast.success("当前为任务不可行区域");
      }else if(this.editors.valuable_bits_0 == true){
        this.$toast.success("当前为任务可行区域");
      }
        
    },
    // 任务可执行区域否按钮事件
    oneNone() {
        this.editors.valuable_bits_0 = 0;
        this.$toast.success("当前为任务不可行区域");
    },
    //是否允许掉头是按钮区域
    twoYes() {
      // this.editors.valuable_bits_1 = 1;
      // this.$toast.success("当前为可掉头");
      if(this.editors.valuable_bits_1 == false){
        this.$toast.success("当前为可掉头");
      }else if(this.editors.valuable_bits_1 == true){
        this.$toast.success("当前为不可掉头");
      }
    },
    //是否云讯掉头否按钮区域
    twoNone() {
      this.editors.valuable_bits_1 = 0;
      this.$toast.success("当前为不可掉头");
    },

    //前进入库方向
    forward() {
      this.editors.valuable_bits_2 = 1;
      this.$toast.success("当前为前进入库");
    },
    //后退入库方向
    retreat() {
      this.editors.valuable_bits_2 = 0;
      this.$toast.success("当前为后退入库");
    },

    startX(val) {
      this.editors.start_point.x = Number(val);
        //使用for循环遍历
            let as = 1
            //定义一个用来生成矩形的坐标数据
            let weizi = { width: "", height: "30", age: "", x: "", y: "" };
            //把点击后保存的第一项数据的x轴减去保存的第二项数据的x轴
            let newx = this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as;
            // 把点击后保存的第一项数据的y轴减去保存的第二项数据的y轴
            let newy = this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as;
            //把减去后的x值的平方和y轴的平方相加
            let newzuobiao = newx * newx + newy * newy;
            //进行开平方处理得到宽度
            let num = Math.sqrt(newzuobiao, 2);
            //给位置对象的宽度进行赋值
            weizi.width = num;
            //把每一项的x坐标进行赋值
            weizi.x = this.editors.start_point.x/50* as;
            //把每一项的x坐标进行赋值
            weizi.y = this.height - this.editors.start_point.y/50* as;
            // 进行弧度的计算
            let oneNum = Math.atan2(
              // 把第二项数据的y轴减去第一项的y轴
              this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as,
              // 把第二项数据的x轴减去第一项的x轴
              this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as
              //以x轴为夹角，y轴发生改变x轴不变
            );
            // 转换成角度
            let theta = oneNum * (180 / Math.PI);
            //把角度进行赋值
            weizi.age = theta;
            // 在把得到后的每一项数据的对象进行push到定义好的数组中
            console.log(weizi)
            this.editors.weizhi = weizi
    },
    startY(val) {
      this.editors.start_point.y = Number(val);
      let as = 1
            //定义一个用来生成矩形的坐标数据
            let weizi = { width: "", height: "30", age: "", x: "", y: "" };
            //把点击后保存的第一项数据的x轴减去保存的第二项数据的x轴
            let newx = this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as;
            // 把点击后保存的第一项数据的y轴减去保存的第二项数据的y轴
            let newy = this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as;
            //把减去后的x值的平方和y轴的平方相加
            let newzuobiao = newx * newx + newy * newy;
            //进行开平方处理得到宽度
            let num = Math.sqrt(newzuobiao, 2);
            //给位置对象的宽度进行赋值
            weizi.width = num;
            //把每一项的x坐标进行赋值
            weizi.x = this.editors.start_point.x/50* as;
            //把每一项的x坐标进行赋值
            weizi.y = this.height - this.editors.start_point.y/50* as;
            // 进行弧度的计算
            let oneNum = Math.atan2(
              // 把第二项数据的y轴减去第一项的y轴
              this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as,
              // 把第二项数据的x轴减去第一项的x轴
              this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as
              //以x轴为夹角，y轴发生改变x轴不变
            );
            // 转换成角度
            let theta =-(oneNum * (180 / Math.PI));
            //把角度进行赋值
            weizi.age = theta;
            // 在把得到后的每一项数据的对象进行push到定义好的数组中
            console.log(weizi)
            this.editors.weizhi = weizi
    },
    targetX(val) {
      this.editors.target_point.x = Number(val);
      let as = 1
            //定义一个用来生成矩形的坐标数据
            let weizi = { width: "", height: "30", age: "", x: "", y: "" };
            //把点击后保存的第一项数据的x轴减去保存的第二项数据的x轴
            let newx = this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as;
            // 把点击后保存的第一项数据的y轴减去保存的第二项数据的y轴
            let newy = this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as;
            //把减去后的x值的平方和y轴的平方相加
            let newzuobiao = newx * newx + newy * newy;
            //进行开平方处理得到宽度
            let num = Math.sqrt(newzuobiao, 2);
            //给位置对象的宽度进行赋值
            weizi.width = num;
            //把每一项的x坐标进行赋值
            weizi.x = this.editors.start_point.x/50* as;
            //把每一项的x坐标进行赋值
            weizi.y = this.height - this.editors.start_point.y/50* as;
            // 进行弧度的计算
            let oneNum = Math.atan2(
              // 把第二项数据的y轴减去第一项的y轴
              this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as,
              // 把第二项数据的x轴减去第一项的x轴
              this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as
              //以x轴为夹角，y轴发生改变x轴不变
            );
            // 转换成角度
            let theta = oneNum * (180 / Math.PI);
            //把角度进行赋值
            weizi.age = theta;
            // 在把得到后的每一项数据的对象进行push到定义好的数组中
            console.log(weizi)
            this.editors.weizhi = weizi
    },
    targetY(val) {
      this.editors.target_point.y = Number(val);
      let as = 1
            //定义一个用来生成矩形的坐标数据
            let weizi = { width: "", height: "30", age: "", x: "", y: "" };
            //把点击后保存的第一项数据的x轴减去保存的第二项数据的x轴
            let newx = this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as;
            // 把点击后保存的第一项数据的y轴减去保存的第二项数据的y轴
            let newy = this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as;
            //把减去后的x值的平方和y轴的平方相加
            let newzuobiao = newx * newx + newy * newy;
            //进行开平方处理得到宽度
            let num = Math.sqrt(newzuobiao, 2);
            //给位置对象的宽度进行赋值
            weizi.width = num;
            //把每一项的x坐标进行赋值
            weizi.x = this.editors.start_point.x/50* as;
            //把每一项的x坐标进行赋值
            weizi.y = this.height - this.editors.start_point.y/50* as;
            // 进行弧度的计算
            let oneNum = Math.atan2(
              // 把第二项数据的y轴减去第一项的y轴
              this.editors.target_point.y/50 * as - this.editors.start_point.y/50 * as,
              // 把第二项数据的x轴减去第一项的x轴
              this.editors.target_point.x/50 * as - this.editors.start_point.x/50 * as,
              //以x轴为夹角，y轴发生改变x轴不变
            );
            // 转换成角度
            let theta = -(oneNum * (180 / Math.PI));
            //把角度进行赋值
            weizi.age = theta;
            // 在把得到后的每一项数据的对象进行push到定义好的数组中
            console.log(weizi)
            this.editors.weizhi = weizi
    },
    vel_max(val) {
      this.editors.vel_max = Number(val);
    },
    onwidth(val) {
      this.editors.width = Number(val);
      this.editors.weizhi.height = Number(val)/10/5;
    },
    //点击保存按钮发送请求
    async preserve() {
      //发送修改的数据请求
      let bits_0 = 0;
      let bits_1 = 0;
      if(this.editors.valuable_bits_0 == false || this.editors.valuable_bits_0 == 0){
        bits_0 = 0
      }else if(this.editors.valuable_bits_0 == true || this.editors.valuable_bits_0 == 1){
        bits_0 = 1
      }
      if(this.editors.valuable_bits_1 == false || this.editors.valuable_bits_1 == 0){
        bits_1 = 0
      }else if(this.editors.valuable_bits_1 == true || this.editors.valuable_bits_1 == 1){
        bits_1 = 1
      }
      try {
        let res = await updateeditorsApi({
          id: this.editors.id, //传入id
          valuable_bits_0: bits_0, //传入可执行区域
          valuable_bits_1: bits_1, //传入可掉头
          valuable_bits_2: this.editors.valuable_bits_2, //传入入库方向
          vel_max: this.editors.vel_max, //传入速度
          width: this.editors.width, //传入宽度
          start_point: {
            x: this.editors.start_point.x,
            y: this.editors.start_point.y,
          }, //传入起始点x,y轴坐标
          target_point: {
            x: this.editors.target_point.x,
            y: this.editors.target_point.y,
          }, //传入终点x,y轴坐标
          weizhi: this.editors.weizhi,
        });
        //提示用户保存成功
        this.$toast.success("保存成功");
        //调用获取路线编辑的数据方法刷新页面
        this.$parent.geteditors();
      } catch {
        this.$toast.fail("保存失败");
      }
      // console.log(res);
    },

    //图片右边便宜
    right() {
      this.loctionleft += 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    left() {
      this.loctionleft -= 30;
      Cookies.set('loctionlefts', this.loctionleft);
    },
    top() {
      this.loctiontop -= 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    bottom() {
      this.loctiontop += 30;
      Cookies.set('loctiontops', this.loctiontop);
    },
    //放大图片按钮
    big() {
      if (this.num >= 2) {
        this.num = 2;
        return;
      } else {
        this.num += 0.1;
      }
      Cookies.set('nums', this.num);
    },
    // 缩小按钮
    min() {
      if (this.num <= 0.5) {
        this.num = 0.4;
        return;
      } else {
        this.num -= 0.1;
      }
      Cookies.set('nums', this.num);
    },

    //库位id的输入
    onChange(input) {
      // input 是当前点击按钮的值
      if (this.keyshow == true) {
        this.inif.pathID = input; //把点击的那一项的值赋值给输入框
      } else if (this.widthShow == true) {
        this.inif.width = input;
      } else if (this.speedShow == true) {
        this.inif.speed = input;
      }
    },
    //键盘的删除和确定事件
    onKeyPress(button) {
      if (button == "{enter}") {
        // 如果按确认键的相应操作
        this.keyshow = false;
        this.widthShow = false;
        this.speedShow = false;
      }
      if (button == "{bksp}") {
        // 删除键的相应操作
      }
    },

    //--------------------------------------------------------获取所有的库位点
    async getrecord() {
      let res = await gainApi();
      // console.log(res,'库位点');
      if (res.data.length !== 0 && res.data.msg != "successed") {
        //转换成对象键值对形式
        let newres = yaml.load(res.data);
        // 定义一个数组用来解构
        let one = [];
        //将转换好的对象追加到robot数组中
        one.push(newres);
        // 把最外层的数组给解构出来
        let flattened = [].concat.apply([], one);
        //赋值给robot数组
        this.mock = flattened;
        // console.log(res, "库位列表数据");
      }
    },

    // 绘图中的退出按钮功能
    quit() {
      //把状态改为false
      // this.picShow = false;
      // 清除路线点位
      this.zuobiao = [];
      // 1清除路线
      this.border = [];
      // this.newnum = 1;
      //生成一个自定义事件修改父组件中的值
      this.$emit("newquit", false);
      //提示用户取消成功
      this.$toast.success("取消成功");
    },
    //重新进行绘图
    reload() {
      (this.zuobiao = []), //把圆点坐标哦清空
        (this.border = []); //把边框清空
    },
    //点击绘图按钮
    two() {
      this.move = false; //点击绘图按钮时把移动开关阀改为false
      this.newshow = true; //把绘图按钮改成true
      this.picShow = true; //点击绘图把变量改为true
    },
    //点击图片移动
    one() {
      this.move = true; //移动开关阀
      this.newshow = false; //绘图开关阀
      // this.moveModel(); //调用图片移动事件
    },
    //移动按钮事件
    yidong() {
      this.move = true; //把移动的开关改为true
      // this.moveModel(); //调用图片移动事件
      this.newshow = false; //绘图开关阀
    },
    //绘图按钮
    huitu() {
      // this.move = false; //把移动的开关改为false
      // this.newshow = true; //把绘图开关改为true
      // this.$toast.success("请绘制路线");
      // this.picShow = true;  //
    },
    select(item) {
      if(this.newshow == true){

      }else{
        this.$emit("activepathcompiles", item);
        console.log(item, "点击后的数据");
      }

    },
    // 绘图事件
    son(e) {
      console.log(e, "点击的信息");
      console.log(e.layerX, "图片上x坐标", e.layerY, "图片上y轴坐标");
      console.log(e.layerX / this.num / 0.6, "图片上x坐标2", e.layerY / this.num / 0.6, "图片上y轴坐标2");
      if (this.zuobiao.length == 2) return;
      // console.log(this.zuobiao,'--------------坐标--------------');
      // console.log(this.zuobiao[1].x,'起点x轴坐标',this.zuobiao[1].y,'起点y轴坐标');
      // 判断this.show等于false

      if (this.newshow == false) {
        // 直接return不执行后面的代码
        return;
      }
      // 点击后保存的坐标
      let zuobiao3 = {
        x: "",
        y: "",
      };
      zuobiao3.x = e.layerX / this.num / 0.6; //点击图片上x坐标
      zuobiao3.y = e.layerY / this.num / 0.6; //点击图片上y坐标


      
      let zuobiao2 = {
        x: "",
        y: "",
      };
      let newobj = document.querySelector(".List");
      // console.log(newobj.offsetLeft, newobj.offsetTop, "外部盒子信息");
      //将点击后的坐标赋值给zoubiao2
      console.log(newobj.offsetLeft, newobj.offsetTop, "外部点击的");
      zuobiao2.x = (e.pageX - newobj.offsetLeft - 10 + this.loctionleft) / 2 / 0.5 / this.num; //250
      zuobiao2.y = (e.pageY - newobj.offsetTop - 80 + this.loctiontop) / 2 / 0.5 / this.num; //110
      // zuobiao2.x=e.pageX
      // zuobiao2.y=e.pageY
      // zuobiao2.x = e.pageX;
      // zuobiao2.y = e.pageY;
      console.log(zuobiao2.x, "点击x轴坐标");
      console.log(zuobiao2.y, "点击y轴坐标");
      //然后将坐标追加到数组中
      //this.zuobiao.push(zuobiao2);
      this.zuobiao.push(zuobiao3);
      let zuobiaos = this.zuobiao;
      if(zuobiaos.length==2){
        if(zuobiaos[1].x <= zuobiaos[0].x + this.Areas && zuobiaos[1].x >= zuobiaos[0].x - this.Areas){
          zuobiaos[1].x = zuobiaos[0].x
        }
        if(zuobiaos[1].y <= zuobiaos[0].y + this.Areas && zuobiaos[1].y >= zuobiaos[0].y - this.Areas){
          zuobiaos[1].y = zuobiaos[0].y
        }
        this.zuobiao = zuobiaos;
      }
      console.log(this.zuobiao)
      //判断坐标的的长度是不是大于或者等于2
      if (this.zuobiao.length >= 2) {
        //使用for循环遍历
        for (let a = 0; a < this.zuobiao.length; a++) {
          //在判断遍历出来的a是不是等于我保存的数组中的长度
          if (a == this.zuobiao.length - 1) {
            //直接return不执行后面的代码
            return;
          } else {
            //定义一个用来生成矩形的坐标数据
            let weizi = { width: "", height: "30", age: "", x: "", y: "" };
            //把点击后保存的第一项数据的x轴减去保存的第二项数据的x轴
            let newx = this.zuobiao[a + 1].x - this.zuobiao[a].x;
            // 把点击后保存的第一项数据的y轴减去保存的第二项数据的y轴
            let newy = this.zuobiao[a + 1].y - this.zuobiao[a].y;
            //把减去后的x值的平方和y轴的平方相加
            let newzuobiao = newx * newx + newy * newy;
            //进行开平方处理得到宽度
            let num = Math.sqrt(newzuobiao, 2);
            //给位置对象的宽度进行赋值
            weizi.width = num;
            //把每一项的x坐标进行赋值
            weizi.x = this.zuobiao[a].x;
            //把每一项的x坐标进行赋值
            weizi.y = this.zuobiao[a].y;
            // 进行弧度的计算
            let oneNum = Math.atan2(
              // 把第二项数据的y轴减去第一项的y轴
              this.zuobiao[a + 1].y - this.zuobiao[a].y,
              // 把第二项数据的x轴减去第一项的x轴
              this.zuobiao[a + 1].x - this.zuobiao[a].x
              //以x轴为夹角，y轴发生改变x轴不变
            );
            // 转换成角度
            let theta = oneNum * (180 / Math.PI);
            //把角度进行赋值
            weizi.age = theta;
            // 在把得到后的每一项数据的对象进行push到定义好的数组中
            this.border.push(weizi);
            this.newborder = weizi;
          }
        }
      }
    },

    // 刷新页面按钮
    restore() {
      //回到第0个页面
      this.$router.go(0);
    },

    // 获取地图的方法
    getMap() {
        let ws = new WebSocket("ws://" + window.location.hostname + ":10009"); //获取本地服务器的地址
     //     let ws = new WebSocket("ws://192.168.20.101:10009");
      ws.onmessage = (e) => {
        // 使用箭头函数改变this的指向
        //当服务器有消息，就会自动调用这个函数
        const res = yaml.load(e.data);
        if (res.uri == "/sirius/topics/slam_grid_map") {
          //判断res中的uri路劲是不是等于有图片的路径
          this.myimage = res.data; //如果等于就把里面中有的data进行base格式进行拼接
          this.width = res.info.width;
          this.height = res.info.height;
          this.originX = res.info.origin.image.width;
          this.originY = res.info.origin.image.height;
          this.newx = res.info.origin.position.x;
          this.newy = res.info.origin.position.y;
          // console.log(this.newx,'原始点x坐标');
          // console.log(this.newy,'原始点y坐标');
          // console.log(this.width,'宽度',this.height,'高度');
        } else if (res.uri == "/sirius/topics/robot_status_localizer_result") {
          this.inif.x = res.fused_x; //保存获取到的x轴坐标
          this.inif.y = res.fused_y; //保存获取到的y轴坐标
          // console.log(this.inif.x,this.inif.y);
          this.inif.fused_angle = res.fused_angle;
        }
      };
    },
    //点击修改按钮
    change(item) {
      //判断点击的那一项等于空
      if (this.editors == "") {
        //提示用户
        this.$toast.fail("请点击你要编辑的那一项!");
      } else {
        let newid = new String(item.id); //改为字符串
        this.formShow = true; //把表单改为显示
        this.inif.pathID = newid; //给输入框表单直接赋值
        this.show = true; //把newid改为true为禁用
        this.id = item.id; //保存id
        this.newItem = item; //保存item
        this.$store.commit("changShow", false); //把二级路路由改为隐藏
      }
    },

    //-----------------------点击绘图保存按钮
    async keep() {
      if (this.border == "") {
        this.$toast.fail("请选择路线");
        return;
      }
      //判断是新增还是修改
      if (this.id == "") {
        //发送新增路线请求
        let res = await addeditorsApi({
          // id: this.inif.pathID, //传入id
          // valuable_bits_0: newarea, //传入可执行区域
          // valuable_bits_1: newround, //传入可掉头
          // vel_max: this.inif.speed, //传入速度
          // width: this.inif.width, //传入宽度
          weizhi: this.newborder, //传入角度边框
          start_point: {
            // x: this.zuobiao[0].x*3,
            // y: (this.height - this.zuobiao[0].y -215) *5,
            // x: this.zuobiao[0].x,
            // y: this.zuobiao[0].y,
            // x: this.zuobiao[0].x * 10 + this.newx / 100,
            // y: this.zuobiao[0].y * 10 + this.newy / 100,

            x: (this.zuobiao[0].x) * 5 * 10.0,
            // x: (this.zuobiao[0].x * 5 ) * 10.0,
            y: (this.height-this.zuobiao[0].y) * 5 * 10.0,

            // x: (this.zuobiao[0].x * 10 + this.newx * 100)*10,
            // y: (this.zuobiao[0].y * 10 + this.newy * 100)*10,
          }, //传入起始点x,y轴坐标
          target_point: {
            // x: this.zuobiao[1].x*4.5,
            // y: (this.height - this.zuobiao[1].y -215) *5,
            // x: this.zuobiao[1].x,
            // y: this.zuobiao[1].y,
            x: (this.zuobiao[1].x) * 5 * 10.0,
            // x: (this.zuobiao[0].x * 5 ) * 10.0,
            y: (this.height-this.zuobiao[1].y) * 5 * 10.0,
            //y: this.zuobiao[1].y/ this.num * 10 - this.newy / 100,
            // x: (this.zuobiao[1].x * 10 + this.newx * 100)*10,
            // y: (this.zuobiao[1].y * 10 + this.newy * 100)*10,
          }, //传入终点x,y轴坐标
        });
        // console.log(res, "新增数据");
        this.$emit("newquit", false);
      } else {
        //发送修改的数据请求
        let res = await updateeditorsApi({
          id: this.newItem.id, //传入id
          valuable_bits_0: newarea, //传入可执行区域
          valuable_bits_1: newround, //传入可掉头
          vel_max: this.inif.speed, //传入速度
          width: this.inif.width, //传入宽度
          start_point: {
            x: this.newItem.start_point.x,
            y: this.newItem.start_point.y,
          }, //传入起始点x,y轴坐标
          target_point: {
            x: this.newItem.target_point.x,
            y: this.newItem.target_point.y,
          }, //传入终点x,y轴坐标
          weizhi: this.editors.weizhi,
        });
        // console.log(res, "修改后的数据");
        this.$set(this.editors, "vel_max", this.inif.speed);
        this.$set(this.editors, "width", this.inif.width);
        this.$set(this.editors, "valuable_bits_0", newarea);
        this.$set(this.editors, "valuable_bits_1", newround);
      }
      this.$emit("geteditors"); //调用父组件中方法刷新页面
      this.$toast.success(this.id == "" ? "新建成功" : "编辑成功"); //提示用户
      this.formShow = false; //关闭表单
      this.inif.pathID = ""; //清空输入框id
      this.inif.speed = ""; //清空输入框速度
      this.inif.width = ""; //清空输入框宽度
      this.area = 0; //清空开关状态
      this.round = 0; //清空开关状态
      this.$store.commit("changShow", true); //把二级路路由改为显示
      this.zuobiao = []; //把坐标清空
      this.border = []; //把边框清空
      // console.log(this.complete,'生成后的坐标数据');
    },

    // 点击头部导航栏返回按钮触发
    onClickLeft() {
      this.keyshow = false;
      this.widthShow = false;
      this.speedShow = false;
      this.formShow = false; //把表单状态改为隐藏
      this.formKey++; //点击返回清除表单的验证
      this.area = 0; //把任务可执行区域设置为空0
      this.round = 0; //把是否可行掉头设置为空0
      this.inif.pathID = ""; //清空输入框id
      this.inif.speed = ""; //清空输入框速度
      this.inif.width = ""; //清空输入框宽度
      this.$store.commit("changShow", true); //把二级路路由改为显示
    },
    //
    //删除路线编辑的方法
    remove(id) {
      //判断点击的这一项等于空
      if (this.editors == "") {
        // 提示用户
        this.$toast.fail("请选择你要的删除的那一项!");
        // 直接retrun不执行下面代码
        return;
      }
      //加入确认框提示
      Dialog.confirm({
        title: "删除路线编辑",
        message: `您确定要删除id为${this.editors.id}的路线嘛?`,
      })
        .then(async () => {
          //发送删除路线的接口请求
          let res = await popeditorsApi({
            id: id, //传入id
          });
          //提示用户删除成功
          this.$toast.success("删除成功");
          //声明一个自定义事件修改父组件中的值
          this.$emit("geteditors");
          //在声明一个删除清空的自定义事件
          this.$emit("empty", "");
        })
        .catch(() => {
          //提示用户
          this.$toast.fail("取消成功");
        });
    },
  },
};
</script>

<style lang="less" scoped>
.List {
  // width: 100%;
  display: flex;
  height: 100vh;
  .myimg {
    margin-left: 40px;
    position: relative;
    width: 955px;
    display: flex;
    height: 400px;
    border: 2px solid black;
    overflow: hidden;
    .right {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      position: absolute;
      top: 40%;
      right: 38%;
      color: #1ac1c1;
      z-index: 1000;
      border: none;
    }
    .left {
      position: absolute;
      top: 40%;
      left: -35px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;

      border: none;
      z-index: 1000;
    }
    .top {
      position: absolute;
      top: -35px;
      right: 64%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;

      z-index: 1000;
      border: none;
    }
    .bottom {
      position: absolute;
      bottom: -35px;
      right: 64%;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: transparent;
      color: #1ac1c1;
      border: none;
    }
    .mybig {
      position: fixed;
      bottom: 30px;
      right: 240px;
      .van-button {
        margin-left: 20px;
      }
    }
  }
  .property {
    position: fixed;
    top: 90px;
    right: 0;
    text-align: left;
    line-height: 35px;
    width: 200px;
    height: 1000px;
    background-color: #12151a;
    .mybutton {
      text-align: center;
      .van-button {
        color: #fff;
        font-size: 20px;
        border-radius: 12px;
        width: 170px;
        background-color: #1a1c25;
        border: none !important;
        margin-top: 12px;
      }
    }
    .beiji {
      color: #5f5f61;
      height: 100%;
      background-color: #181a23;
    }
    .zore {
      font-size: 24px;
      line-height: 45px;
      height: 45px;
      color: white;
      margin-top: 20px;
      background-color: #212430;
      border-radius: 14px 14px 0 0;
      text-align: center;
    }
    .middle {
      color: #dbdbdb;
      font-size: 14px;
      text-indent: 0.5em;
    }
  }
}

.van-cell--center {
  width: 400px !important;
}
.composition {
  width: 100%;
  height: 100%;
  .sonimg {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .van-button {
    width: 100px;
    border-radius: 20px;
    margin-left: 120px;
    margin-top: 5px;
  }
}
#myone {
  position: relative;
  top: 0;
  left: 0;
  cursor: move;
}
#span {
  line-height: 38px;
  text-align: center;
  border-radius: 50%;
  background-color: #00d1d1;
  position: absolute;
}
#sonspan {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  width: 22px;
  height: 22px;
  position: absolute;
  background-color: #feed9d;
  border: 2px solid #cdc6a6;
  line-height: 22px;
}
#myspan {
  width: 35px;
  height: 35px;
  border: 2px solid #00d1d1;
  border-radius: 20px;
  position: absolute;
  top: 200px;
  left: 100px;
  text-align: center;
  color: rgb(10, 0, 1);
  background-color: #ddd9;
  font-weight: 900;
}
.myspanID{position: absolute;
  color: rgb(10, 0, 1);
  font-weight: 900;
}
#myspan2 {
  width: 35px;
  height: 35px;
  border: 2px solid #fdfdfd;
  border-radius: 20px;
  position: absolute;
  top: 200px;
  left: 100px;
}
#mianspan {
  line-height: 38px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  background-color: #00d1d159;
  position: absolute;
}

::v-deep .van-form .van-cell {
  background-color: white !important;
}

::v-deep .van-popup {
  width: 400px;
  height: 500px;
}
.newbutton {
  position: fixed;
  bottom: 0;
  left: 200px;
}
.sevebutton {
  display: flex;
  .van-button {
    margin: 0 auto;
    width: 100px !important;
  }
}

#bycar {
  width: 25px;
  height: 25px;
  position: absolute;
  // z-index: 100;
}
.Gray {
  width: 22px;
  height: 22px;
  position: absolute;
  background-color: #feed9d;
  border: 2px solid #cfc598;
}

.newtwo {
  display: flex;
}
.newsever {
  text-align: center;
  .van-button {
    font-size: 16px;
    border-radius: 18px;
    color: #fff;
    font-weight: 700;
    background-color: #181a23;
    width: 100px;
    border: 2px solid #1989fa;
  }
}
.max {
  display: flex;
}
.mywidth {
  display: flex;
}
.keyss2 {
  margin-left: -7px;
}
.keyss {
  margin-left: 21px;
}
.advance {
  margin-left: 28px;
  height: 33px;
  line-height: 20px;
}
.oneretreat {
  height: 33px;
  line-height: 20px;
}
.yes {
  width: 44px;
  height: 33px;
  line-height: 20px;
}
.none {
  width: 44px;
  height: 33px;
  line-height: 20px;
}
.List{
  /deep/.van-radio__label{
  color: #fff;
}
/deep/.van-radio__label{
  text-indent: 0;
}
/deep/.van-icon-success::before{
  //display: none;
  text-indent:-7px;
}/deep/.van-radio__label {
    margin-left: 2px;
}
}

</style>
